<template>
  <div>
    <div class="component-mainHeader">
      <div class="top">
        <div class="topleft">
          <p>
            <span class="iconfont" style="color:#1abc9a;margin-right:3px;">&#xe607;</span>工作量统计
          </p>
        </div>
        <div class="topright">
         <!-- <el-button type="info" @click="$router.go(-1)">
            <span style="font-weight:700;margin-right:5px;" class="iconfont">&#xe606;</span>返回
          </el-button>-->
          <el-button type="info" @click="$router.go(0)">
            <span style="font-weight:700;margin-right:5px;" class="iconfont">&#xe662;</span>刷新
          </el-button>
        </div>
      </div>
    </div>

    <div class="main">
      <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick" class="tabs-header">
        <el-tab-pane :label="'线路'" name="first">
          <div class="gcl">
            <div class="title">
              线路队
              <span @click="checked1 = !checked1">查看隐藏工程量</span>
            </div>
            <el-table :data="infodetail" tooltip-effect="dark" style border>
              <el-table-column label="序号" align="center" width="80" type="index"></el-table-column>
              <el-table-column label="施工方式" align="center" width="80" prop="num1"></el-table-column>
              <el-table-column label="施工内容" align="center" prop="contain"></el-table-column>
              <el-table-column label="单位" align="center" width="80" prop="dan"></el-table-column>
              <el-table-column label="预算数量" align="center" width="80" prop="num2"></el-table-column>
              <el-table-column label="系统计算量" align="center" width="100" prop="num2"></el-table-column>

              <el-table-column label="预结算数量" align="center" width="100" prop="num2"></el-table-column>
              <el-table-column label="修改数量" align="center" width="80" prop="num2"></el-table-column>
              <el-table-column label="损耗率" align="center" width="80" prop="num2"></el-table-column>
              <el-table-column label="单价" align="center" width="80" prop="num2"></el-table-column>
              <el-table-column label="总计" align="center" width="80" prop="num2"></el-table-column>
              <el-table-column label="备注" align="center"  prop="num2"></el-table-column>



            </el-table>
          </div>

          <transition name="bounce">
            <div class="gcl" v-if="checked1">
              <div class="title">
               隐藏线路队工作量
              </div>
              <el-table :data="infodetail" tooltip-effect="dark" style border>
                <el-table-column label="序号" align="center" width="200" type="index"></el-table-column>
                <el-table-column label="定额编号" align="center" width="200" prop="num1"></el-table-column>
                <el-table-column label="施工内容" align="center" prop="contain"></el-table-column>
                <el-table-column label="内容" align="center" width="200" prop="dan"></el-table-column>
                <el-table-column label="单位" align="center" width="200" prop="dan"></el-table-column>
                <el-table-column label="数量" align="center" prop="num2"></el-table-column>
              </el-table>
            </div>
          </transition>
          <div class="gcl_footer">
          <div class="gcl_footer_top">
            <span>预算费用总计：</span>
            <span>2136781</span>&nbsp;&nbsp;
            <span>预结算费用总计：</span>
            <span>待结算</span>
          </div>
          <div class="gcl_footer_bottom">
            <span>终结算费用总计：</span>
            <span>待结算</span>
          </div>
        </div>
        </el-tab-pane>

        <el-tab-pane :label="'熔纤'" name="third">
          <div class="gcl">
            <div class="title">
              熔纤队
              <span @click="checked3 = !checked3">查看隐藏工程量</span>
            </div>
            <el-table :data="infogls" tooltip-effect="dark" style border>
                 <el-table-column label="序号" align="center" width="80" type="index"></el-table-column>
              <el-table-column label="施工方式" align="center" width="80" prop="num1"></el-table-column>
              <el-table-column label="施工内容" align="center" prop="contain"></el-table-column>
              <el-table-column label="单位" align="center" width="80" prop="dan"></el-table-column>
              <el-table-column label="预算数量" align="center" width="80" prop="num2"></el-table-column>
              <el-table-column label="系统计算量" align="center" width="100" prop="num2"></el-table-column>

              <el-table-column label="预结算数量" align="center" width="100" prop="num2"></el-table-column>
              <el-table-column label="修改数量" align="center" width="80" prop="num2"></el-table-column>
              <el-table-column label="损耗率" align="center" width="80" prop="num2"></el-table-column>
              <el-table-column label="单价" align="center" width="80" prop="num2"></el-table-column>
              <el-table-column label="总计" align="center" width="80" prop="num2"></el-table-column>
              <el-table-column label="备注" align="center"  prop="num2"></el-table-column>

            </el-table>
          </div>

          <transition name="bounce">
            <div class="gcl" v-if="checked3">
              <div class="title">
               隐藏熔纤队工作量
              </div>
              <el-table :data="infodetail" tooltip-effect="dark" style border>
                <el-table-column label="序号" align="center" width="200" type="index"></el-table-column>
                <el-table-column label="定额编号" align="center" width="200" prop="num1"></el-table-column>
                <el-table-column label="施工内容" align="center" prop="contain"></el-table-column>
                <el-table-column label="内容" align="center" width="200" prop="dan"></el-table-column>
                <el-table-column label="单位" align="center" width="200" prop="dan"></el-table-column>
                <el-table-column label="数量" align="center" prop="num2"></el-table-column>
              </el-table>
            </div>
          </transition>
          <div class="gcl_footer">
          <div class="gcl_footer_top">
            <span>预算费用总计：</span>
            <span>2136781</span>&nbsp;&nbsp;
            <span>预结算费用总计：</span>
            <span>待结算</span>
          </div>
          <div class="gcl_footer_bottom">
            <span>终结算费用总计：</span>
            <span>待结算</span>
          </div>
        </div>
        </el-tab-pane>

        <el-tab-pane :label="'管道'" name="fourth">
          <div class="gcl">
            <div class="title">
              管道队
              <span @click="checked3 = !checked3">查看隐藏工程量</span>
            </div>
            <el-table :data="infogls" tooltip-effect="dark" style border>
                <el-table-column label="序号" align="center" width="80" type="index"></el-table-column>
              <el-table-column label="施工方式" align="center" width="80" prop="num1"></el-table-column>
              <el-table-column label="施工内容" align="center" prop="contain"></el-table-column>
              <el-table-column label="单位" align="center" width="80" prop="dan"></el-table-column>
              <el-table-column label="预算数量" align="center" width="80" prop="num2"></el-table-column>
              <el-table-column label="系统计算量" align="center" width="100" prop="num2"></el-table-column>

              <el-table-column label="预结算数量" align="center" width="100" prop="num2"></el-table-column>
              <el-table-column label="修改数量" align="center" width="80" prop="num2"></el-table-column>
              <el-table-column label="损耗率" align="center" width="80" prop="num2"></el-table-column>
              <el-table-column label="单价" align="center" width="80" prop="num2"></el-table-column>
              <el-table-column label="总计" align="center" width="80" prop="num2"></el-table-column>
              <el-table-column label="备注" align="center"  prop="num2"></el-table-column>
            </el-table>
          </div>

          <transition name="bounce">
            <div class="gcl" v-if="checked3">
              <div class="title">
              隐藏管道队工作量
              </div>
              <el-table :data="infodetail" tooltip-effect="dark" style border>
                <el-table-column label="序号" align="center" width="200" type="index"></el-table-column>
                <el-table-column label="定额编号" align="center" width="200" prop="num1"></el-table-column>
                <el-table-column label="施工内容" align="center" prop="contain"></el-table-column>
                <el-table-column label="内容" align="center" width="200" prop="dan"></el-table-column>
                <el-table-column label="单位" align="center" width="200" prop="dan"></el-table-column>
                <el-table-column label="数量" align="center" prop="num2"></el-table-column>
              </el-table>
            </div>
          </transition>
          <div class="gcl_footer">
          <div class="gcl_footer_top">
            <span>预算费用总计：</span>
            <span>2136781</span>&nbsp;&nbsp;
            <span>预结算费用总计：</span>
            <span>待结算</span>
          </div>
          <div class="gcl_footer_bottom">
            <span>终结算费用总计：</span>
            <span>待结算</span>
          </div>
        </div>
        </el-tab-pane>


        <el-tab-pane :label="'设备'" name="second">
          <div class="gcl">
            <div class="title">
              设备队
              <span @click="checked2 = !checked2">查看隐藏工程量</span>
            </div>
            <el-table :data="infogl" tooltip-effect="dark" style border>
                <el-table-column label="序号" align="center" width="80" type="index"></el-table-column>
              <el-table-column label="施工方式" align="center" width="80" prop="num1"></el-table-column>
              <el-table-column label="施工内容" align="center" prop="contain"></el-table-column>
              <el-table-column label="单位" align="center" width="80" prop="dan"></el-table-column>
              <el-table-column label="预算数量" align="center" width="80" prop="num2"></el-table-column>
              <el-table-column label="系统计算量" align="center" width="100" prop="num2"></el-table-column>

              <el-table-column label="预结算数量" align="center" width="100" prop="num2"></el-table-column>
              <el-table-column label="修改数量" align="center" width="80" prop="num2"></el-table-column>
              <el-table-column label="损耗率" align="center" width="80" prop="num2"></el-table-column>
              <el-table-column label="单价" align="center" width="80" prop="num2"></el-table-column>
              <el-table-column label="总计" align="center" width="80" prop="num2"></el-table-column>
              <el-table-column label="备注" align="center"  prop="num2"></el-table-column>



            </el-table>
          </div>

          <transition name="bounce">
            <div class="gcl" v-if="checked2">
              <div class="title">
              隐藏设备队工作量
              </div>
              <el-table :data="infodetail" tooltip-effect="dark" style border>
                <el-table-column label="序号" align="center" width="200" type="index"></el-table-column>
                <el-table-column label="定额编号" align="center" width="200" prop="num1"></el-table-column>
                <el-table-column label="施工内容" align="center" prop="contain"></el-table-column>
                <el-table-column label="内容" align="center" width="200" prop="dan"></el-table-column>
                <el-table-column label="单位" align="center" width="200" prop="dan"></el-table-column>
                <el-table-column label="数量" align="center" prop="num2"></el-table-column>
              </el-table>
            </div>
          </transition>
          <div class="gcl_footer">
          <div class="gcl_footer_top">
            <span>预算费用总计：</span>
            <span>2136781</span>&nbsp;&nbsp;
            <span>预结算费用总计：</span>
            <span>待结算</span>
          </div>
          <div class="gcl_footer_bottom">
            <span>终结算费用总计：</span>
            <span>待结算</span>
          </div>
        </div>
        </el-tab-pane>

      </el-tabs>
    </div>

    <div class="component-model">
      <el-dialog title="修改数量" :visible.sync="dialogVisible" width="600px">
        <el-form
          :model="ruleForm"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
          style="font-size: 12px"
        >
          <el-form-item label="施工内容：">
            <el-input v-model="ruleForm.content" disabled="disabled"></el-input>
          </el-form-item>
          <el-form-item label="预结算数量：">
            <el-input v-model="ruleForm.content" disabled="disabled"></el-input>
          </el-form-item>
          <div class="xiu">
            <span>修改数量：</span>
            <el-input-number
              v-model="ruleForm.content"
              controls-position="right"
              @change="handleChange"
              :min="1"
              :max="10"
            ></el-input-number>
          </div>
          <el-form-item label="备注：">
            <textarea
              v-model="ruleForm.txt"
              style="width:360px; margin-left:-98px;font-family: '微软雅黑';font-weight: 400;font-style: normal;font-size: 14px;color: #606266;text-align: left;box-sizing:border-box;resize: none;border-radius:3px;padding:9px 6px;border:1px solid #e4e4e4;outline:none;"
              placeholder="请输入内容..."
            ></textarea>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button @click="dialogVisible = false;addPerson">确定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
export default {
  name:"teamWork",
  data() {
    return {
      type: true,
      frameInfo: [],
      singleInfo: [],
      subInfo: [],
      activeName: "first",
      checked1: false,
      checked2: false,
      checked3: false,
      checked4: false,
      //线路队
      infodetail: [
        {
          //工程量管理-工程量明细
          num: "111",
          profession: "222",
          kinds: "333",
          num1: "444",
          contain: "555",
          dan: "666",
          num2: "777",
          num3: "888",
          num4: "999"
        }
      ],
      //设备队
      infogl: [
        {
          //光缆段长表
          num: "111",
          profession: "222",
          kinds: "333",
          num1: "444",
          contain: "555",
          dan: "666",
          num2: "777",
          num3: "888",
          num4: "999"
        }
      ],
      //熔纤队
      infogls: [
        {
          //光缆段长表
          num: "111",
          profession: "222",
          kinds: "333",
          num1: "444",
          contain: "555",
          dan: "666",
          num2: "777",
          num3: "888",
          num4: "999"
        }
      ],
      dialogVisible: false,
      ruleForm: {
        content: "",
        num: "",
        nums: "",
        txt: ""
      }
    };
  },
  created() {},
  mounted() {},
  methods: {
    // 点击tab切换
    handleClick(tab, event) {},

    edit() {
      this.dialogVisible = true;
    },
    handleChange(value) {
      console.log(value);
    }
  },
};
</script>
<style scoped>
.bounce-enter{
      margin-top: -100px;
}
.bounce-enter-active{
    transition:all 1s ease;
}


.bounce-enter-to{
   margin-top: 0px;
}

.bounce-leave-active{
   transition:all .3s ease;
}



.main {
  width: 1100px;
  margin: 20px auto;
  text-align: left;
}
.gcl {
  margin-bottom: 20px;
}
.gcl .title {
  background: #f8f8f8;
  height: 35px;
  line-height: 35px;
  color: #666;
  padding: 0 20px;
  font-size: 14px;
  border: 1px solid #e4e4e4;
  border-bottom: none;
  text-align: left;
}
a {
  color: #1abc9c;
  cursor: pointer;
  text-decoration: none;
}
.xiu {
  text-align: left;
  margin-bottom: 20px;
}
.xiu span {
  display: inline-block;
  text-align: right;
  width: 85px;
  margin-right: 15px;
}

.gcl span {
  float: right;
  font-size: 12px;
  border: 1px solid rgba(204, 204, 204, 1);
  margin-top:4px;
  width: 120px;

  line-height: 26px;
  text-align: center;
}
.gcl span:hover {
  cursor: pointer;
  opacity: 0.7;
}

/* 工程量管理 底部 价格显示 */
.gcl_footer {
  text-align: right;
}

.gcl_footer .gcl_footer_top {
  margin-bottom: 10px;
  font-size: 18px;
}

.gcl_footer .gcl_footer_top span:nth-child(2n),
.gcl_footer .gcl_footer_bottom span:nth-child(2n) {
  color: #1abc9c;
}

.gcl_footer .gcl_footer_bottom {
  margin-bottom: 10px;
  font-size: 19px;
}
</style>
